<template>
  <div class="Banner">
    <el-carousel
      :height="height"
      :interval="time"
      :indicator-position="indiPosition"
      :arrow="arrow"
      :autoplay="autoplay"
    >
      <el-carousel-item v-for="(item, index) in imgList" :key="index">
        <slot name="content" :data="{ item, index }"></slot>
      </el-carousel-item>
    </el-carousel>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "Banner",
  props: {
    imgList: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default: "600px"
    },
    time: {
      type: Number,
      default: 3000
    },
    indiPosition: {
      type: String,
      default: ""
    },
    arrow: {
      type: String,
      default: "hover"
    },
    autoplay: {
      type: Boolean,
      default: true
    }
  }
};
</script>

<style scoped lang="stylus">
.Banner >>> .el-carousel__item {
  img {
        width 100%
        height 100%
  }
}
</style>
